<script setup lang='ts'>
import { ref } from 'vue'
const data = ref([
  {
    no: '23***847',
    amount: '16.50',
    status: '成功',
    outStatus: '出货成功',
    deviceId: '100635',
  },
  {
    no: '23***847',
    amount: '16.50',
    status: '成功',
    outStatus: '出货成功',
    deviceId: '100635',
  },
  {
    no: '23***847',
    amount: '16.50',
    status: '成功',
    outStatus: '出货成功',
    deviceId: '100635',
  }
])
</script>

<template>
  <view class="date">2024-05-19</view>
  <view class="table bg-white">
    <uni-table border stripe empty-text="无数据" >
      <uni-tr>
        <uni-th align="center">机器编号</uni-th>
        <uni-th align="center">笔数</uni-th>
        <uni-th align="center">收入</uni-th>
        <uni-th align="center">成本</uni-th>
        <uni-th align="center">利润</uni-th>
      </uni-tr>
      <uni-tr v-for="i in data">
        <uni-td align="center">100017</uni-td>
        <uni-td align="center">88</uni-td>
        <uni-td align="center">52.00</uni-td>
        <uni-td align="center">52.00</uni-td>
        <uni-td align="center" class="yellow">52.00</uni-td>
      </uni-tr>
    </uni-table>
    <view class="pager">
      <button class="btn">上一页</button>
      <button class="btn">下一页</button>
    </view>
  </view>
</template>

<style scoped lang='scss'>
.date {
  padding: 24rpx 0;
  background: #fff;
  text-align: center;
  font-size: 28rpx;
  color: #1A1A1A;
}
.yellow {
  color: #FF766C;
}
.uni-table-td {
  text-align: center;
}
</style>